<template>
    <div>
        <!-- 登录后可以评论 -->
        <div class='common-root'>
            <h2>评论</h2>
            <div class='comment-input'>                                        
                <div class='comment-img'> <el-avatar icon="el-icon-user-solid" :src="this.touImg"></el-avatar></div>                                    
                <div class="input-footer">
                    <!-- 登录了会出现的内容 -->
                    <div class='login-success'>
                        <div class='input-body'>
                            <textarea name="" id="text1" cols="30" rows="10" placeholder="写下你的评论...."></textarea>
                        </div>
                        <!-- 评分的地方 -->
                        <div class="block1" style="margin-left:12px">
                            <el-rate
                                v-model="value2"
                                :colors="colors"
                                show-score
                                >
                            </el-rate>
                        </div>
                        <!-- 展示图片的地方 -->
                        <!-- <div @click="aaa" v-for="(data,index) in test" :key="index">{{data.name}}</div> -->
                        <div class="book">
                            
                        </div>
                        <div class='footer-div'>                           
                            <input type="file" name='file' multiple id='file1' accept="images/*" @change="sendFiles" />
                            <i class='el-icon-picture-outline' style="font-size:20px" @click="book()" multiple></i>
                            <button class='footer-button' @click="publish">发布</button>
                        </div>
                    </div>
                    <!-- 如果没登录会出现的内容 -->
                    <div class='no-login'>
                        <div class='login-opt-title'>登录之后可发表评论</div>
                        <div class='carry-login'>立即登录</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import cookie from '../../cookie/index'
import jwtDecode from 'jwt-decode'
const vm={
    name:'MainComment',
    data() {
        return {
            imgDel: [],
            imgs:null,
            image:'',
            value2: null,
            formData:new FormData(),
            colors: ['#99A9BF','#F7BA2A','#FF9900'] , 
            touImg:null
        }
    },
    props:['id','title'],
    mounted() {
     
        this.touImg = jwtDecode(cookie.getToken()).avatar
    },
    methods: {      
        book(){
            var file =  document.getElementById("file1")
            file.click(); 
            // 监听input变化事件
            file.addEventListener("change",function(){
                var files = this.files
                var fileLen = files.length;
                var book =document.getElementsByClassName('book')[0];
                for(let i = 0; i < fileLen; i++){
                    var reader = new FileReader();                   
                    reader.onload=function(){
                        // this.imgs = this.result;
                        book.innerHTML += `
                            <div class="pic1">
                                <img src="${this.result}"/>
                                <div class="shadow">
                                    <i class='el-icon-close' onClick="
                                        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
                                    "></i>
                                </div>
                            </div>
                        `
                    }
                    reader.readAsDataURL(files[i]);
                }    
            })             
        },      
        sendFiles(){
            let files = document.getElementById('file1')           
            for(let i=0;i<files.files.length;i++){
                this.formData.append('files',files.files[i])
            }
        },
        clearImgs(){},
        // 对店铺进行评论
        publish(){ 
            const range = jwtDecode(cookie.getToken())
            // this.$emit('event')
            var text =document.getElementById('text1')
            if(text.value == ''){
                this.$message({
                    message:'请输入评论内容',
                    type:'warning',
                    center:true
                })
            }else{
                this.$http({
                    url:'/shops/comment/shop',
                    method:'post',
                    headers:{
                        'Authorization':cookie.getToken()
                    },
                    data:this.formData,
                    params:{
                        comment:text.value,
                        // settingId:this.$route.query.id,
                        settingId:this.$route.params.id,
                        userId:range.userId,
                        marks:this.value2,
                        files:this.formData,
                    }
                })
                .then(data => {
                    if(data.data.code === 199){
                        this.$message({
                            message:data.data.message,
                            type:'warning',
                            center:true
                        })
                    }else{
                        this.$message({
                            message:data.data.data,
                            type:'success',
                        })
                        text.value='';
                        this.value2='';
                        var book =document.getElementsByClassName('book')[0];
                        book.innerHTML=''
                        // showRoot();
                        //遍历根评论
                        this.$http({
                            url:'/shops/comment/getComment/shop',
                            methods:'get',
                            headers:{
                                'Authorization':cookie.getToken()
                            },
                            params:{
                                shopId:this.$route.params.id
                            }
                        })
                        .then(data => {
                            this.x.$emit('hello',data.data);
                        })
                        .catch(error => {
                            console.log(error);
                        })
                    }
                })
                .catch(error => {
                    console.log(error);
                })
            }  
        }
    },  
}
export default vm
</script>
<style lang="less">
 // 登录之后可以评论
    .common-root{
        margin: 40px 36px 25px 36px;
        width: 80%;
        h2{
            color: black;
        }
        .comment-input{
            position: relative;
            margin-top: 10px;
            .comment-img{
                display: inline;
                float: left;
                width: 50px;
                height: 50px;;
                border-radius: 50%;
                img{
                    height: 100%;
                    width: 100%;
                    border-radius: 50%;
                }
            }
            .input-footer{
                position: relative;
                margin-left: 70px;
                border: 2px solid #f0f0f0;
                // 没有登录评论的样式
                .no-login{
                    display: none;
                    text-align: center;
                    height: 72px;                           
                    padding-top: 20px;
                    width: 100%;
                    .login-opt-title{
                        font-size: 14px;
                        color: #18191e;
                    }
                    .carry-login{
                        display: inline-block;
                        width: 96px;
                        cursor: pointer;
                        height: 30px;                          
                        line-height: 30px;
                        font-size: 14px;
                        margin-top: 14px;
                        background-color: #007bff;
                        color: #fff;                   
                    }
                }
                .login-success{
                    .input-body{
                        height: 104px;
                        margin: 12px;
                        border-bottom: 2px solid #f0f0f0;
                        #text1{
                            height: 100%;
                            width: 100%;
                            display: block;
                            border: none;
                            font-size: 14px;
                            line-height: 20px;
                            color: #333;
                            outline: none;
                            border: none;
                            resize: none;
                        }
                    }
                    .book{  
                        margin: 8px;
                        display: flex;
                       .pic1{
                           width: 80px;
                           height: 80px;
                           position: relative;
                           margin-right: 14px;
                           img{
                               width: 100%;
                               height: 100%;
                           }
                           i{
                               cursor: pointer;
                           }
                       }
                    }
                    .footer-div{
                        height: 34px;
                        line-height: 34px;
                        overflow: hidden;
                        padding: 10px 14px;
                        position: relative;
                        #file1{
                            display: none;
                        }
                        .footer-span{
                            float:left;
                            cursor: pointer;
                        }
                        .footer-button{
                            cursor: pointer;
                            outline: none;
                            background-color: #007bff;
                            color: white;
                            padding: 10px 15px;
                            float: right;
                            border: 1px solid #01c8d4;
                        }
                    }
                }                
            }
        }

    }

    .shadow{
        width: 80px;
        height: 80px;
        position: absolute;
        background: rgba(0,0,0,.1);
        color: white;
        font-size: 14px;
        z-index: 90;
        top: 0;
        // display: none;
    }    
</style>